<template>
	<div>
		<Row type="flex" justify="end" class="code-row-bg" :gutter="16">
			<!--<Col span="3">
			<Select v-model="searchForm.dot_id" filterable placeholder="网点">
				<Option value="" key="">全部</Option>
				<Option v-for="(item,key) in getSearchData.dot" :value="key" :key="key">{{ item}} </Option>
			</Select>
			</Col>
			<Col span="2">
			<Button type="primary" icon="ios-search" @click="getTableDataExcute(1)">搜索</Button>
			</Col>-->
			<Col span="2">
			<Button type="success" icon="plus" @click="addBtn()">添加</Button>
			</Col>
		</Row>
		<br>

		<Row>
			<div class="demo-spin-container" v-if="tableLoading">
				<Spin fix>
					<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
					<div>加载中...</div>
				</Spin>
			</div>
			<Table border :columns="columns" :data="feeds.data" @on-sort-change='onSortChange'></Table>
			<div style="margin: 10px;overflow: hidden">
				<div style="float: right;">
					<Page :total="feeds.record_count" :current="feeds.page_current" :page-size="feeds.page_size" class="paging" show-elevator show-total show-sizer @on-change="handleOnPageChange" @on-page-size-change='onPageSizeChange'></Page>
				</div>
			</div>
		</Row>

		<add-component v-if='addModal.show === true' @on-add-modal-success='getTableDataExcute(1)' @on-add-modal-hide="addModalHide"></add-component>
		<edit-component v-if='editModal.show === true' :modal-id='editModal.id' @on-edit-modal-success='getTableDataExcute(1)' @on-edit-modal-hide="editModalHide"> </edit-component>

	</div>
</template>

<script>
	import AddComponent from './components/add-caruser'
	import EditComponent from './components/edit-caruser'
	import {
		getTableData
	} from '@/api/caruser'

	export default {
		components: {
			AddComponent,
			EditComponent
		},
		data() {
			return {
				getSearchData :{
					dot:[]
				},
				searchForm: {
					dot_id:''
				},
				tableLoading: false,
				tableStatus: {
					enable: []
				},
				feeds: {
					data: [],
					record_count: 0,
					page_current: 1,
					page_size: 10
				},
				addModal: {
					show: false
				},
				editModal: {
					show: false,
					id: 0
				},
				columns: [{
						title: 'ID',
						key: 'c_user_id',
						sortable: true,
						width: 100
					},
					{
						title: '真实姓名',
						key:'realname'
					},
					{
						title: '账号',
						key: 'username'
					},
					{
						title: '性别',
						key: 'sex_text'
					},
					{
						title: '状态',
						key: 'status_text'
					},
					{
						title: '创建时间',
						key: 'create_time'
					},
					{
						title: '操作',
						render: (h, params) => {
							let t = this;
							return h('div', [
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									on: {
										click: () => {
											this.editModal.show = true
							
											this.editModal.id = params.row.c_user_id
										}
									}

								}, '编辑'),
							

							])
						}
					},
				]
			}
		},
		created() {
			let t = this
			t.getTableDataExcute(t.feeds.page_current);
			//t.getSearchDataExcute();
		},
		methods: {
			handleOnPageChange: function(page_current) {
				this.getTableDataExcute(page_current)
			},
			onPageSizeChange: function(page_size) {
				this.feeds.page_size = page_size
				this.getTableDataExcute(1)
			},
			getTableDataExcute(page_current) {
				let t = this
				t.tableLoading = true
				t.feeds.page_current = page_current
				getTableData(page_current, t.feeds.page_size, t.searchForm).then(res => {
					if(res.data.code == 1){
						t.feeds.data = res.data.data.list
					//					console.log(t.feeds.data);
					t.feeds.record_count = res.data.data.record_count
					t.tableLoading = false
					}else{
						t.$Notice.error({
							title: res.data.msg
						})
						t.tableLoading = false
					}
					
				}, function(error) {
					t.tableLoading = false
				})
			},
//			getSearchDataExcute(){
//				let t = this;
//				getData().then(res => {
//					t.getSearchData.dot = res.data.data.dot;
//					t.getSearchData.status = res.data.data.status;
//					t.getSearchData.apply_status = res.data.data.apply_status;
//				}, function(error) {
//					t.tableLoading = false
//				})
//			},
			onSortChange: function(data) {

			},
			delExcute(coupon_id, key) {
				let t = this
				delCoupon(coupon_id).then(res => {
					if(res.data.code == 1) {
						t.feeds.data.splice(key, 1)
						t.$Notice.success({
							title: res.data.msg
						})
					} else {
						this.$Notice.error({
							title: res.data.msg
						})
					}

				})
			},
			addBtn() {
				this.addModal.show = true
			},
			addModalHide() {
				this.addModal.show = false
			},
			editModalHide() {
				this.editModal.show = false
			}
		}
	}
</script>